// 导入
import Vue from 'vue'
import Router from 'vue-router'

// 正常的加载方式，一次全部加载
// import Home from '../page/Home'
// import News from '../page/News'
// import User from '../page/User'
// import Aside from '../components/Aside'
// import Newview from '../page/Newview'

// 路由懒加载，需要的时候再加载
// let Home = function(){
//     return import('../page/Home')
// }
let Home = ()=>import('../page/Home')
let News = ()=>import('../page/News')
let User = ()=>import('../page/User')
let Aside = ()=>import('../components/Aside')
let Newview = ()=>import('../page/Newview')
let Junshi = ()=>import('../page/news/Junshi')
let Yule = ()=>import('../page/news/Yule')


// 注册
Vue.use(Router)
// 配置路由规则数组
let routes = [
    // 重定向
    // {
    //     path:'/',
    //     redirect:'/home'
    // },
    {
        path:'/home',
        // component: Home
        // 命名视图
        components:{
            default:Home,
            aside:Aside
        },
        meta:{
            title:'首页'
        }
    },
    {
        path:'/news',
        component: News,
        children:[
            {
                path:'/news/junshi',
                component:Junshi
            },
            {
                path:'/news/yule',
                component:Yule
            },
        ],
        meta:{
            title:'新闻'
        }
    },
    {
        path:'/user',
        component: User,
        beforeEnter: (to, from, next) => {
            console.log('路由独享守卫')
            next()
        },
        meta:{
            title:'用户'
        }
    },
    // 动态路由
    {
        path:'/newview/:id',
        component:Newview

    }
]
// 创建路由对象
let router = new Router({
    routes,
    mode:'hash',
    linkActiveClass:'active'
})
// 全局前置守卫
router.beforeEach((to,from,next)=>{
    // console.log(to)
    // console.log(from)
    console.log('全局前置守卫')
    // 拦截
    let arr = ['/','/home','/user']
    if(arr.indexOf(to.path)==-1) {
        alert('滚！！')
        return next('/home')
    }
    // 必须调用
    next()
    // 设置title标题
    document.title = to.meta.title
})
// 全局解析守卫
router.beforeResolve((to,from,next)=>{
    console.log('全局解析守卫')
    next()
})
// 全局后置钩子
router.afterEach(()=>{
    console.log('全局后置钩子')
})
// 导出
export default router